<template>
  <div class="nav-menu">
    <el-row class="tac">
      <el-col class="test">
        <el-menu
          :default-active="defaultUrl"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-coordinate"></i>
              <span>小区服务</span>
            </template>
            <el-menu-item-group>
              <!-- <template slot="title">分组一</template> -->
              <el-menu-item
                index="/home/services/pay-report"
                @click="navTo(`/home/services/pay-report`)"
                >缴费上报</el-menu-item
              >
              <el-menu-item
                index="/home/services/pay-info"
                @click="navTo(`/home/services/pay-info`)"
                >缴费情况</el-menu-item
              >
              <el-menu-item
                index="/home/services/pay-list"
                @click="navTo(`/home/services/pay-list`)"
                >缴费记录</el-menu-item
              >
              <el-menu-item
                index="/home/services/complaint"
                @click="navTo(`/home/services/complaint`)"
                >投诉处理</el-menu-item
              >
              <el-menu-item
                index="/home/services/repair"
                @click="navTo(`/home/services/repair`)"
                >报修处理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="tem">
            <template slot="title">
              <i class="el-icon-thumb"></i>
              <span slot="title">温度上报</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/home/temperature-report/today-report"
                @click="navTo(`/home/temperature-report/today-report`)"
                >今日上报</el-menu-item
              >
              <el-menu-item
                index="/home/temperature-report/report-list"
                @click="navTo(`/home/temperature-report/report-list`)"
                >上报记录</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="news">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">新闻情况</span>
            </template>
            <el-menu-item-group>
              <!-- <template slot="title">分组一</template> -->
              <el-menu-item
                index="/home/news-info/news-list"
                @click="navTo(`/home/news-info/news-list`)"
                >已发新闻</el-menu-item
              >
              <el-menu-item
                index="/home/news-info/report-news"
                @click="navTo(`/home/news-info/report-news`)"
                >发布新闻</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="ques">
            <template slot="title">
              <i class="el-icon-collection"></i>
              <span slot="title">社区问卷</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/home/community-ques/ques-list"
                @click="navTo(`/home/community-ques/ques-list`)"
                >已发问卷</el-menu-item
              >
              <el-menu-item
                index="/home/community-ques/report-ques"
                @click="navTo(`/home/community-ques/report-ques`)"
                >发布问卷</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="notice">
            <template slot="title">
              <i class="el-icon-collection"></i>
              <span slot="title">社区公告</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/home/notice-info/notice-list"
                @click="navTo(`/home/notice-info/notice-list`)"
                >已发公告</el-menu-item
              >
              <el-menu-item
                index="/home/notice-info/notice-report"
                @click="navTo(`/home/notice-info/notice-report`)"
                >发布公告</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span slot="title">防疫知识</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/home/prevention-info/prevention-list"
                @click="navTo(`/home/prevention-info/prevention-list`)"
                >已发记录</el-menu-item
              >
              <el-menu-item
                index="/home/prevention-info/prevention-report"
                @click="navTo(`/home/prevention-info/prevention-report`)"
                >发布知识</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-sold-out"></i>
              <span>人员信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/home/people-info/people-all"
                @click="navTo(`/home/people-info/people-all`)"
              >
                <i class="el-icon-s-custom"></i>
                <span slot="title">全部人员</span>
              </el-menu-item>
              <el-menu-item
                index="/home/people-info/people-pay"
                @click="navTo(`/home/people-info/people-pay`)"
              >
                <i class="el-icon-s-custom"></i>
                <span slot="title">缴费人员</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item
            index="/home/apply-info"
            @click="navTo(`/home/apply-info`)"
          >
            <i class="el-icon-edit"></i>
            <span slot="title">出入申请</span>
          </el-menu-item>

          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-collection"></i>
              <span slot="title">出入记录</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/home/goout-list/go-list"
                @click="navTo(`/home/goout-list/go-list`)"
                >外出记录</el-menu-item
              >
              <el-menu-item
                index="/home/goout-list/out-list"
                @click="navTo(`/home/goout-list/out-list`)"
                >返回记录</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-sold-out"></i>
              <span>社区购物</span>
            </template>
            <el-menu-item-group>
              <!-- <template slot="title">分组一</template> -->
              <el-menu-item
                index="/home/cart/cart-release"
                @click="navTo(`/home/cart/cart-release`)"
                >商品发布</el-menu-item
              >
              <el-menu-item
                index="/home/cart/cart-list"
                @click="navTo(`/home/cart/cart-list`)"
                >商品管理</el-menu-item
              >
              <el-menu-item
                index="/home/cart/cart-order"
                @click="navTo(`/home/cart/cart-order`)"
                >订单管理</el-menu-item
              >
              <el-menu-item
                class="last-item"
                index="/home/cart/cart-over"
                @click="navTo(`/home/cart/cart-over`)"
                >完成订单</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "vueName",
  data() {
    return {
      defaultUrl: "/",
      isApplyMes: true,
    };
  },
  mounted() {
    let href = window.location.href;
    this.defaultUrl = href.split("/#")[1];
    // console.log(this.defaultUrl);
    this.getPath();
  },
  watch: {
    $route: "getPath",
  },
  methods: {
    getPath() {
      this.defaultUrl = this.$route.path;
      // sessionStorage本地存储
      // sessionStorage.setItem("te", "存在");
      // console.log(sessionStorage.getItem("te"));
      let token = sessionStorage.getItem("loginToken");
      console.log(token);
      if (token == null) {
        this.$router.push("/login");
      } else {
        console.log(this.defaultUrl);
        switch (this.defaultUrl) {
          case "/home":
            this.$store.commit("SET_contentTitle", []);
            break;
          case "/home/services/pay-report":
            this.$store.commit("SET_contentTitle", ["小区服务", "缴费上报"]);
            break;
          case "/home/services/pay-info":
            this.$store.commit("SET_contentTitle", ["小区服务", "缴费情况"]);
            break;
          case "/home/services/pay-list":
            this.$store.commit("SET_contentTitle", ["小区服务", "缴费记录"]);
            break;
          case "/home/services/repair":
            this.$store.commit("SET_contentTitle", ["小区服务", "报修处理"]);
            break;
          case "/home/services/complaint":
            this.$store.commit("SET_contentTitle", ["小区服务", "投诉处理"]);
            break;
          case "/home/temperature-report/today-report":
            this.$store.commit("SET_contentTitle", ["温度上报", "今日上报"]);
            break;
          case "/home/temperature-report/report-list":
            this.$store.commit("SET_contentTitle", ["温度上报", "上报记录"]);
            break;
          case "/home/news-info/report-news":
            this.$store.commit("SET_contentTitle", ["新闻情况", "发布新闻"]);
            break;
          case "/home/news-info/news-list":
            this.$store.commit("SET_contentTitle", ["新闻情况", "已发新闻"]);
            break;
          case "/home/prevention-info/prevention-list":
            this.$store.commit("SET_contentTitle", ["防疫知识", "已发记录"]);
            break;
          case "/home/prevention-info/prevention-report":
            this.$store.commit("SET_contentTitle", ["防疫知识", "发布知识"]);
            break;
          case "/home/community-ques/ques-list":
            this.$store.commit("SET_contentTitle", ["社区问卷", "已发问卷"]);
            break;
          case "/home/community-ques/report-ques":
            this.$store.commit("SET_contentTitle", ["社区问卷", "发布问卷"]);
            break;
          case "/home/notice-info/notice-list":
            this.$store.commit("SET_contentTitle", ["社区公告", "已发公告"]);
            break;
          case "/home/notice-info/notice-report":
            this.$store.commit("SET_contentTitle", ["社区公告", "发布公告"]);
            break;
          case "/home/people-info":
            this.$store.commit("SET_contentTitle", ["人员信息"]);
            break;
          case "/home/apply-info":
            this.$store.commit("SET_contentTitle", ["出入申请"]);
            break;
          case "/home/goout-list/go-list":
            this.$store.commit("SET_contentTitle", ["出入记录", "外出记录"]);
            break;
          case "/home/goout-list/out-list":
            this.$store.commit("SET_contentTitle", ["出入记录", "返回记录"]);
            break;
          case "/home/cart/cart-release":
            this.$store.commit("SET_contentTitle", ["社区购物", "商品发布"]);
            break;
          case "/home/cart/cart-list":
            this.$store.commit("SET_contentTitle", ["社区购物", "商品管理"]);
            break;
          case "/home/cart/cart-order":
            this.$store.commit("SET_contentTitle", ["社区购物", "订单管理"]);
            break;
          case "/home/cart/cart-over":
            this.$store.commit("SET_contentTitle", ["社区购物", "完成订单"]);
            break;
          case "/home/people-info/people-all":
            this.$store.commit("SET_contentTitle", ["人员信息", "全部人员"]);
            break;
          case "/home/people-info/people-pay":
            this.$store.commit("SET_contentTitle", ["人员信息", "缴费人员"]);
            break;
          default:
            break;
        }
      }

      // console.log(this.defaultUrl);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    navTo(routerUrl) {
      // console.log(routerUrl);
      // this.$store.commit("SET_contentTitle", ["导航一", "选项一"]);
      // this.$emit("childFn", ["导航一", "选项一"]);
      this.$router.push({
        path: routerUrl,
        query: {},
      });
    },
  },
};
</script>

<style lang="scss">
// @import "@/assets/styles/global.scss";
.nav-menu {
  //  margin-top: 5px;
  margin-bottom: 50px;
  width: 200px;
  height: 95%;
  overflow-y: auto;
  background-color: #545c64;

  .tac {
    // width: 200px;
    padding-right: 5px;
    box-sizing: border-box;
    // height: 80%;

    // overflow-y: auto;
    // .test {
    //   height: 100%;
    //   overflow-y: auto;
    // }
    // background-color: #545c64;

    .el-menu {
      border: none;
    }
    .item {
      position: absolute;
      top: -6px;
      .is-dot {
        border: none;
      }
    }
    .last-item {
      // margin-bottom: 10px;
    }
  }
}
</style>
